<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
    <php title="app_title" :menu-title="name" :data="lists" pnum1="10" :pnum2="20" pboolean1="true" :pboolean2="true"></php>

</div>

<script type="text/javascript">

    Vue.component('php',{
        props:['title','MenuTitle','lists','data','pnum1','pnum2','pboolean1','pboolean2'],
        data:function(){
            return {
                msg:'php is best'
            }
        },
        template:`
        <div>
            <div>{{msg}}</div>
            <div>{{title}}</div>
            <div>{{MenuTitle}}</div>

            <ul>
                <li v-for="(item,key) in data ">{{item}}</li>
            </ul>
            <third MaxAge="35"></third>

            <div>{{pnum1+'==='+typeof pnum1}}</div>
            <div>{{pnum2+'==='+typeof pnum2}}</div>
            <div>{{pboolean1+'==='+typeof pboolean1}}</div>
            <div>{{pboolean2+'==='+typeof pboolean2}}</div>


        </div>

`
    })
    Vue.component('third',{
        props:['MaxAge'],
        template:`<div>max age={{MaxAge}}</div>`
    })
    var app = new Vue({
        el: '#app',
        data: {
            msg:'hello',
            name:'app_name',
            lists:['a','b','c'],
        },

    })
</script>

</body>
</html>